<template>
    <div class="chart-table"  id="tableList">
        <el-table
            :data="tableList"
            border
            :span-method="objectSpanMethod"
            style="width: 100%; margin-top: 20px">
            <el-table-column v-for="(item,index) in heads" :key="index"
                :prop="'key_'+index"
                :label="item" >
            </el-table-column>
             
            </el-table>
    </div>
</template>
<script>
import util from 'util'
import html2canvas from 'html2canvas'
export default {
    props: {
        tablist: {
            type: Array
        },
        tableColumn:{}
    },
    data(){
        return {
            heads:[],
            tableList:[]
        }
    },
    watch:{
        tablist: {
            deep: true,
            handler (value) {
                this.init(value);
            }
        },
    },
    methods:{
        getDataURL(){
            html2canvas(document.getElementById('tableList'),{scale:1,logging:false,useCORS:true}).then(function(canvas) {
                    var image = new Image();  
                    image.src = canvas.toDataURL("image/png");  
                    image.width=280;
                    image.height=220;
                    setTimeout(() => {
                        var canvas = document.createElement("canvas");
                        canvas.width = image.width;
                        canvas.height = image.height;
                        var ctx = canvas.getContext("2d");
                        ctx.drawImage(image, 0, 0, image.width, image.height);
                        return canvas.toDataURL("image/jepg");
                    }, 50);
                });
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }){
            if(columnIndex<this.tableColumn &&rowIndex<this.tableList.length-1){
                if(rowIndex>0 && rowIndex<this.tableList.length && row['key_'+columnIndex] == this.tableList[rowIndex-1]['key_'+columnIndex]    ){
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }else if(rowIndex<this.tableList.length-1 && row['key_'+columnIndex] == this.tableList[rowIndex+1]['key_'+columnIndex]){
                    var index =0;
                    for(var i =rowIndex;i<this.tableList.length-1;i++){
                        if(row['key_'+columnIndex] ==this.tableList[i]['key_'+columnIndex]){
                            index++;
                        }else{
                            break;
                        }
                    }
                    return {
                        rowspan:index,
                        colspan:1
                    }
                }
            } 
            
        },
        init(value){
            var list =util.util.cloneObj(value);
            this.heads =list[0]
            list.splice(0,1);
            var arr=[];
            for(var j = 0;j<list.length;j++){
                var it  =list[j];
                var item={};
                for(var i =0;i<it.length;i++){
                    item['key_'+i]=it[i];
                }
                arr.push(item);
            }
            this.tableList =arr;
            
        }
    },
    mounted(){
        this.init(this.tablist);
    }
}
</script>
<style lang="less">

</style>


